<template>
	<form class="pt-4 px-[25px] md:px-[35px] pb-10" @submit.prevent="showWarning($t('app.todo'))">
		<input type="submit" class="hidden" />
		<base-input
			v-model="fiatAmount"
			type="number"
			label-t="wallet.youPayWith"
			:placeholder="$t('wallet.enterTheAmount')">
			<template #suffix>
				<base-dropdown
					v-model="fiat"
					:options="
						currencyStore.fiatList.map((i) => ({
							...i,
							id: i.currency,
							text: i.appName || i.currency,
							icon: '',
							iconSrc: getCurrencyIcon(i.currency)
						}))
					"
					class="ml-1 -mr-2"
					filterable
					filter-field="appName"
					:popoverProps="{ placement: 'bottom-end' }"
					immediate>
					<template #default="{ data, show }: { data: CurrencyItem | any; show: boolean }">
						<div class="w-[126px] h-10 flex items-center pl-3 pr-2 gap-2 bg-bg-3 rounded-lg">
							<base-currency :currency="data?.currency" class="size-5" />
							<n-ellipsis v-bind="NBind.Ellipsis">{{ data?.appName || data?.currency }}</n-ellipsis>
							<base-icon
								name="down"
								class="ml-auto text-t-3 text-[20px] duration-300"
								:class="{ 'rotate-180': show }" />
						</div>
					</template>
				</base-dropdown>
			</template>
		</base-input>
		<base-input
			v-model="cryptoAmount"
			type="number"
			label-t="wallet.youGet"
			:placeholder="$t('wallet.convertAmount')">
			<template #suffix>
				<base-dropdown
					v-model="crypto"
					:options="
						currencyStore.cryptoList.map((i) => ({
							...i,
							id: i.currency,
							text: i.appName || i.currency,
							icon: '',
							iconSrc: getCurrencyIcon(i.currency)
						}))
					"
					class="ml-1 -mr-2"
					filterable
					filter-field="appName"
					:popoverProps="{ placement: 'bottom-end' }"
					immediate>
					<template #default="{ data, show }: { data: CurrencyItem | any; show: boolean }">
						<div class="w-[126px] h-10 flex items-center pl-3 pr-2 gap-2 bg-bg-3 rounded-lg">
							<base-currency :currency="data?.currency" class="size-5" />
							<n-ellipsis v-bind="NBind.Ellipsis">{{ data?.appName || data?.currency }}</n-ellipsis>
							<base-icon
								name="down"
								class="ml-auto text-t-3 text-[20px] duration-300"
								:class="{ 'rotate-180': show }" />
						</div>
					</template>
				</base-dropdown>
			</template>
		</base-input>
		<deposit-activity :currency-to="crypto as CurrencyEnum" />
		<base-button size="large" type="primary" class="h-12 mb-4" @click="showWarning($t('app.todo'))">
			{{ $t('wallet.buyWithMoonPay') }}
		</base-button>
		<base-tip name="about" text-t="wallet.disclaimer" />
	</form>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'
import {
	BaseButton,
	BaseCurrency,
	BaseDropdown,
	BaseIcon,
	BaseInput,
	BaseTip
} from '@/components/base'
import DepositActivity from './deposit-activity.vue'
import { useCurrencyStore } from '@/store'
import { NEllipsis } from 'naive-ui'
import { calcExchangeRate, getCurrencyIcon, showWarning } from '@/utils'
import { CurrencyEnum } from '@/enums'
import { CurrencyItem } from '@/types'
import { NBind } from '@/plugins/naive-ui'

defineOptions({ name: 'ViewsWalletDepositBuyCrypto' })

const currencyStore = useCurrencyStore()
const fiatAmount = ref('')
const fiat = ref<CurrencyEnum | ''>('')
const cryptoAmount = ref('')
const crypto = ref<CurrencyEnum | ''>('')
let inputFrom = ''

watch([fiatAmount, crypto], (v) => {
	if (inputFrom !== 'b') {
		inputFrom = 'a'
		cryptoAmount.value =
			v[0] !== '' && fiat.value && crypto.value
				? String(calcExchangeRate(fiat.value, crypto.value, v[0]))
				: ''
		nextTick(() => (inputFrom = ''))
	}
})
watch([cryptoAmount, fiat], (v) => {
	if (inputFrom !== 'a') {
		inputFrom = 'b'
		fiatAmount.value =
			v[0] !== '' && fiat.value && crypto.value
				? String(calcExchangeRate(crypto.value, fiat.value, v[0]))
				: ''
		nextTick(() => (inputFrom = ''))
	}
})
</script>

<style scoped></style>
